<template>
  <div class="login-page">
    <div class="welcome-box">
      <span class="left" @click="pageEvt"><van-icon name="arrow-left" /></span>
      <span class="right">帮助</span>
      <div class="logo"></div>
    </div>
    <div class="ipt-cls user">
      <input
        type="text"
        v-model.trim="loginObj.phone"
        placeholder="输入用户手机号"
      />
    </div>
    <div class="ipt-cls lock">
      <input
        type="text"
        v-model.trim="loginObj.vdtCode"
        placeholder="输入验证码"
      />
      <span @click="getCode">{{ vdtMsg }}</span>
    </div>
    <van-button color="#30ccb5" type="primary" block class="sign" @click="login"
      >登录</van-button
    >
    <div class="register">
      好没有账号？<span style="color: #30ccb5" @click="goRegister"
        >立即注册</span
      >
    </div>
    <!-- <van-button type="primary" block class="wechat">微信登录</van-button> -->
    <div class="bott-text">
      <van-checkbox v-model="auto" checked-color="#ff5b02" 
        >我已阅读并起同意《xx用户协议》《隐私协议》《中国移动认证服务提条款》,并授权xx使用该账号信息</van-checkbox
      >
    </div>
  </div>
</template> 

<script>
import { CellGroup } from "vant";
// import { config } from "vue/types/umd";

export default {
  name: "",
  props: {},
  components: {},
  data() {
    return {
      vdtMsg: "获取验证码",
      time_num: 10,
      setint: "", //定时器
      flag: true,
      auto: false,
      loginObj: {
        phone: "",
        vdtCode: "",
      },
    };
  },
  methods: {
    pageEvt() {
      this.$router.push("/Home");
    },
    login() {
      //登录
      if (this.auto) {
        if (!this.loginObj.phone) {
          this.$toast("请输入手机号");
        } else if (!this.loginObj.vdtCode) {
          this.$toast("验证码");
        } else {
          this.logina();
        }
      } else {
        this.$toast("请先阅读并同意用户协议");
      }
    },
    logina() {
      //登录接口
      this.$api
        .login({
          phone: this.loginObj.phone,
          code: this.loginObj.vdtCode,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$toast("登录成功");
            setTimeout(() => {
              sessionStorage.setItem("token", res.data.token);
              this.$router.push("/Home");
            }, 1500);
          } else {
            this.$toast(res.message);
          }
        });
    },
    goRegister() {
      this.$router.push("/register");
    },
    getCode() {
      //获取验证码
      if (this.flag) {
        if (!this.loginObj.phone) {
          this.$toast("请输入手机号");
        } else {
          this.$api
            .getCode({
              phone: this.loginObj.phone,
            })
            .then((res) => {
              if (res.code == 200) {
                this.$toast(`你的验证码为${res.data.code}`);
                this.setIntNum();
                this.flag = false;
              } else {
                this.$toast(res.message); 
              }
            });
        }
      }
    },
    setIntNum() {
      clearInterval(this.setint);
      this.setint = setInterval(() => {
        this.time_num--;
        this.vdtMsg = `${this.time_num}重新获取`;
        if (this.time_num <= 0) {
          this.vdtMsg = "获取验证码";
          clearInterval(this.setint);
          this.time_num = 60;
          this.flag = true;
        }
      }, 1000);
    },
  },

  created() {},

  mounted() {},

  computed: {},

  watch: {},
};
</script>

<style lang='scss' scoped>
.login-page {
  position: relative;
  height: 100%;
  .welcome-box {
    height: 16rem;
    background: linear-gradient(to bottom, #c3ebe6, #fff);
    .left {
      position: absolute;
      top: 1.5rem;
      left: 1rem;
      font-weight: bold;
    }
    .right {
      position: absolute;
      top: 1.5rem;
      right: 1rem;
    }
    .logo {
      width: 5.7rem;
      height: 4rem;
      background: url("../../assets/6.jpg") center center / 100% 100% no-repeat;
      position: absolute;
      top: 8rem;
      left: 0;
      right: 0;
      margin: auto;
    }
  }
  .ipt-cls {
    display: flex;
    width: 80%;
    margin-left: 10%;
    margin-bottom: 20px;
    border-bottom: solid 1px #ccc;
    padding: 8px 0;
    height: 48px;
    line-height: 32px;
    font-size: 0.7rem;
    &::before {
      display: none;
    }
    input {
      flex: 1;
      border: none;
      outline: none;
      background-color: transparent;
      font-size: 0.7rem;
    }
  }
  .sign {
    border-radius: 1rem;
    margin-top: 4rem;
    margin-bottom: 1rem;
    margin-left: 2.5%;
    width: 95%;
  }
  .wechat {
    border: 1px solid #ccc;
    border-radius: 1rem;
    width: 95%;
    margin-left: 2.5%;
    background: #fff;
    color: black;
  }
  .register {
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
    font-size: 14px;
    color: #333;
  }
  .bott-text {
    display: flex;
    margin-top: 12rem;
    width: 80%;
    margin-left: 10%;
    margin-bottom: 20px;
    padding: 8px 0;
    // height: 48px;
    // line-height: 13rem;
    font-size: 0.6rem;
  }
}
</style>